import { View } from "@tarojs/components";
import { cva } from "class-variance-authority";
import { ReactNode } from "react";
import { twMerge } from "tailwind-merge";

export type ByTextProps = {
  block?: boolean;
  size?: "sm" | "lg" | "xs" | "xl";
  type?:
    | "primary"
    | "error"
    | "warning"
    | "success"
    | "second"
    | "third"
    | "info";
  bold?: boolean;

  lineClamp?: number;
  truncated?: boolean;
  italic?: boolean;
  underline?: boolean;

  className?: string;
  children?: ReactNode;

  onClick?: () => void;
};

const cls = cva("max-w-full", {
  variants: {
    block: {
      true: "",
      false: "inline-block",
    },
    type: {
      primary: "text-primary",
      success: "text-success",
      warning: "text-warning",
      error: "text-error",
      second: "text-second",
      third: "text-third",
    },
    truncated: {
      true: "ellipsis",
    },
    italic: {
      true: "italic",
    },
    lineClamp: {
      true: "line-clamp",
    },
    bold: {
      true: "font-bold",
    },
    size: {
      sm: "text-sm",
      xs: "text-xs",
      lg: "text-lg",
      xl: "text-xl",
    },
    underline: {
      true: "underline",
    },
  },
  defaultVariants: {
    block: false,
  },
});

export default ({
  size,
  type,
  bold,
  block,
  italic,
  lineClamp,
  truncated,
  className,
  underline,

  children,
  onClick,
}: ByTextProps) => {
  return (
    <View
      className={twMerge(
        cls({ block, type, truncated, italic, bold, size, underline }),
        className
      )}
      style={
        lineClamp &&
        lineClamp > 0 &&
        ({ "-webkit-line-clamp": lineClamp } as any)
      }
      onClick={onClick}
    >
      {children}
    </View>
  );
};
